<template>
  <div class="notice-container">
    <div class="notice-table">
  <div class="notice-table-header">消息中心 （{{ noticeStore.unreadCount }}）</div>
      <div class="notice-table-header">
              <!-- 全选当前页 -->
        <el-checkbox
          v-model="selectAll"
          :indeterminate="isIndeterminate"
          @change="onToggleSelectAll"
        >全选</el-checkbox>
        <el-button
          type="danger"
          plain
          @click="markDeleteApi"
          style="background-color: #fff; color: #f56c6c;margin-left: 20px;"
          ><img src="@/assets/icon/icon_stop_nor.png" alt="" /> 删除</el-button
        >
        <el-button
          type="primary"
          plain
          @click="markReadApi"
          style="border-radius: 6px 6px 6px 6px"
          ><img src="@/assets/icon/icon_yd.png" alt="" /> 标为已读</el-button
        >
        <el-button
          type="primary"
          plain
          style="border-radius: 6px 6px 6px 6px"
          @click="markAllReadApi"
          ><img src="@/assets/icon/icon_export_nor.png" alt="" />
          全部标为已读</el-button
        >
      </div>

      <div class="notice-table-body">
        <div style="height: calc(100vh - 280px)">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-checkbox-group v-model="checkedCities">
              <el-collapse-item
                :name="index"
                v-for="(value, index) in tableData"
                :key="index"
              >
                <template #title>
                  <div
                    :class="
                      value.isRead == 1 ? 'notice-table-messageDisabled' : ''
                    "
                    :style="
                      activeNames.includes(index)
                        ? ' '
                        : 'background: linear-gradient(to bottom, #fff,  rgba(231, 231, 231, .2))'
                    "
                    style="
                      padding: 0 10px 0 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                  <!-- :disabled="value.isRead == 1" -->
                    <el-checkbox
                      @click.stop
                      @mousedown.stop
                      :label="value.noticeId"
                      >{{ '' }}</el-checkbox
                    >
                    <div style="margin-left: 30px">{{ value.noticeTime }}</div>
                    <div class="notice-table-message-title">
                      {{ value.noticeName }}
                    </div>
                    <el-icon
                      style="margin-left: auto"
                      v-if="activeNames.includes(index)"
                      ><CaretTop
                    /></el-icon>
                    <el-icon style="margin-left: auto" v-else
                      ><CaretBottom
                    /></el-icon>
                  </div>
                </template>
                <div
                  class="notice-table-message-content"
                  :class="
                    value.isRead == 1 ? 'notice-table-messageDisabled' : ''
                  "
                >
                  {{ value.noticeContent }}
                </div>
              </el-collapse-item>
            </el-checkbox-group>
          </el-collapse>
        </div>
        <div style="padding: 0 20px">
          <Pagination
            style="margin-left: auto"
            :key="pageSize + 'Pagination' + currentPage"
            :count="total"
            :page-size="pageSize"
            :pageNo="currentPage"
            @onPagechange="handlePageChange"
            @onSizechange="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  getUnreadNum,
  getNoticeList,
  markRead,
  markDelete,
  markAllRead,
} from '@/api/notice';
import { CaretBottom, CaretTop } from '@element-plus/icons-vue';
import stores from '@/store';
const noticeStore = stores.useNoticeStore();
const total = ref<any>(0);
const pageSize = ref<any>(10);
const currentPage = ref<any>(1);
const checkedCities = ref<any>([]);
// 全选当前页
const selectAll = ref(false);
const isIndeterminate = computed(() => {
  const idsOnPage = tableData.value.map((i) => i.noticeId);
  const selectedOnPage = checkedCities.value.filter((id: any) =>
    idsOnPage.includes(id)
  );
  return selectedOnPage.length > 0 && selectedOnPage.length < idsOnPage.length;
});
const onToggleSelectAll = (val: any) => {
  const checked = Boolean(val);
  const idsOnPage = tableData.value.map((i) => i.noticeId);
  if (checked) {
    // 合并当前页所有 id 到选中集合，去重
    const set = new Set<string | number>([...checkedCities.value, ...idsOnPage]);
    checkedCities.value = Array.from(set);
  } else {
    // 从已选集合中移除当前页的 id
    checkedCities.value = checkedCities.value.filter(
      (id: any) => !idsOnPage.includes(id)
    );
  }
};
const getUnreadNumApi = async () => {
  await noticeStore.fetchUnreadNum();
};
getUnreadNumApi();
const activeNames = ref<any>([]);
const handleChange = async(val: any) => {
  //console.log(val);
  let ids = []
  for (let index = 0; index < val.length; index++) {
    if(tableData.value[val[index]].isRead != 1){
      ids.push(tableData.value[val[index]].noticeId)
    }
  }
  if(ids.length == 0){
    return
  }
  const res = await markRead({
    ids:ids,
  });
  if (res.code === '200') {
    checkedCities.value = [];
    ElMessage({
      type: 'success',
      message: res.msg,
    });
    getNoticeListApi();
    // 刷新未读数
    getUnreadNumApi();
  } else {
    
  }

};
const tableData = ref<any[]>([]);
const getNoticeListApi = async () => {
  const res = await getNoticeList({
    pageNo: currentPage.value,
    pageSize: pageSize.value,
  });
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
  // 更新全选勾选态
  const idsOnPage = tableData.value.map((i) => i.noticeId);
  const selectedOnPage = checkedCities.value.filter((id: any) =>
    idsOnPage.includes(id)
  );
  selectAll.value =
    idsOnPage.length > 0 && selectedOnPage.length === idsOnPage.length;
};
getNoticeListApi();

const markReadApi = async () => {
  if (checkedCities.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要操作的消息！',
    });
    return;
  }
  const res = await markRead({
    ids: checkedCities.value,
  });
  if (res.code === '200') {
    checkedCities.value = [];
    ElMessage({
      type: 'success',
      message: res.msg,
    });
    getNoticeListApi();
    // 刷新未读数
    getUnreadNumApi();
  } else {
   
  }
};

const markDeleteApi = async () => {
  if (checkedCities.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要操作的消息！',
    });
    return;
  }
  const res = await markDelete({
    ids: checkedCities.value,
  });
  if (res.code === '200') {
    checkedCities.value = [];
    ElMessage({
      type: 'success',
      message: res.msg,
    });
    getNoticeListApi();
  } else {
    
  }
};

const markAllReadApi = async () => {
  const res = await markAllRead();
  if (res.code === '200') {
    ElMessage({
      type: 'success',
      message: res.msg,
    });
    getNoticeListApi();
    // 刷新未读数
    getUnreadNumApi();
  } else {
    
  }
};
const handlePageChange = (page: number) => {
  currentPage.value = page;
  getNoticeListApi();
};
const handleSizeChange = (size: number) => {
  currentPage.value = 1;

  pageSize.value = size;
  getNoticeListApi();
};
</script>
<style lang="scss" scoped>
.notice-container {
  padding: 24px;
  height: calc(100vh - 49px);
  :deep(.el-collapse-item__arrow) {
    display: none;
  }

  .notice-table {
    background-color: #fff;
    position: relative;
    height: 100%;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    .notice-table-header {
      padding: 20px;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid #e7e7e7;
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
    }
    .notice-table-message-title {
      margin-left: 60px;
      font-weight: 600;
      font-size: 13px;
    }
    .notice-table-body {
      .notice-table-messageDisabled {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.3);
      }
    }
    .notice-table-message-content {
      padding: 0 20px;
      padding-left: 260px;
      font-weight: 600;
    }
  }
}
</style>
